<template>
	<view class="home-comm">
		<z-paging :paging-style="{
			height:'calc(100% - (114rpx + env(safe-area-inset-bottom)))'
		}" ref="paging" v-model="dataList" @query="queryList" v-if="!skeletonsLoading">

			<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->

			<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
			<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
			<template #refresher="{refresherStatus}">
				<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
				<CustomRefresher :status="refresherStatus" />
			</template>
			<!-- 自定义没有更多数据view -->
			<template #loadingMoreNoMore>
				<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
				<CustomNomore />
			</template>

			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="list-card">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)" :style="{
						'background-image': getStatusName(item.status)?.border || 'linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #8f41e9, #578aef)'
					}">
				<!-- 	<view class="serial-number">
						<view>
							{{item.id}}
						</view>
					</view> -->
					<view class="item-status">
						<view class="item-status-item" :style="{
							background:getStatusName(item.status)?.background
						}">
							{{getStatusName(item.status)?.value}}
						</view>
					</view>
					<!-- <view class="item-title">问题标题这是个问题标题问题标题这是个问题标题问题标题这是个问题标题问题标题这是个问题标题问题标题这是个问题标题</view> -->
					<view class="item-title">{{item?.title}}</view>
					<!-- <view class="item-detail">{{item?.title}}</view> -->
					<view class="type-detail">
				<!-- 		<view class="datatime">
							发布时间：{{item?.createTime || ''}}
						</view> -->
						<!-- 		<view class="Status">
							状态：{{getStatusName(item.status)?.value}}
						</view> -->
						<view class="datatime">
							预算：{{item?.budget || 0}}￥
						</view>
					</view>
				<!-- 	<view class="code-language">
						<view class="code-item" :style="{
							border:' 1px solid '+  getStatusName(item.status)?.color
						}" v-if="item?.language" v-for="la in item?.language?.split(',') || []" :key='la'>
							{{la}}
						</view>
					</view> -->
				</view>
			</view>

		</z-paging>



	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import request from '../../../http/request.js'
	import CustomNomore from './components/CustomNomore/index.vue'
	import CustomRefresher from './components/CustomRefresher/index.vue'
	import {
		getList
	} from '@/config/APIS.js'
	import {
		getStatusName
	} from '@/utils/utils.js'
	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])

	const loading = ref(true)


	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = async (pageNum, pageSize) => {
		// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
		// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
		// 模拟请求服务器获取分页数据，请替换成自己的网络请求


		// 模拟数据
		const params = {
			pageNo: pageNum,
			pageSize: pageSize,
			type: 1
		}
		request.queryList(params).then(res => {
			// 将请求的结果数组传递给z-paging
			paging.value.complete(res.data.list);
		}).catch(res => {
			// 如果请求失败写this.$refs.paging.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}
	onLoad((option) => {
		console.log(option, "==home=option====");
		paging?.value?.reload();
	})

	const getInit = async () => {
		console.log("getInit====home======");

	}
	// 点击列表的每一项
	const itemClick = (item) => {
		console.log(item, "===item");

	}

	onShow(() => {
		console.log("show home");
		paging?.value?.reload();
	})
	onMounted(() => {
		// uni.showLoading({
		// 	title: "加载中",
		// 	mask: true
		// });
		getInit()
		// setTimeout(() => {
		// 	uni.hideLoading()
		// }, 1500)
	})
</script>

<style scoped lang="scss">
	.home-comm {
		height: 100%;
		overflow: hidden;
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;

		.list-card {
			padding: 40rpx;

			.item {
				width: 100%;
				position: relative;
				min-height: 400rpx;
				// background: url('') no-repeat;
				// background-size: 100% 100%;
				// background-position: center center;
				margin-bottom: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 24rpx;
				box-sizing: border-box;

				// 渐变边框 伪元素+透明边框
				background: #fff;
				border: 4rpx solid transparent;
				background-clip: padding-box, border-box;
				background-origin: padding-box, border-box;
				// background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #8f41e9, #578aef);


				.serial-number {
					// position: absolute;
					height: 60rpx;
					line-height: 80rpx;
					display: flex;
					align-items: center;
					padding-left: 14rpx;
					padding-right: 14rpx;
					font-size: 36rpx;
					min-width: 100rpx;
					color: #0152A1;
					position: absolute;
					top: -16px;
					background: #fff;
				}

				.item-status {
					width: 100%;
					height: 40rpx;
					position: relative;

					.item-status-item {
						font-size: 28rpx;
						line-height: 70rpx;
						color: #fff;
						text-align: center;
						width: 160rpx;
						height: 60rpx;
						/* 透明遮罩+soft-light 给标签打上一层高光 */
						background: linear-gradient(135deg, rgba(255, 255, 255, .4), transparent) #91C8F8;
						background-blend-mode: soft-light;
						display: inline-block;
						border-radius: 15rpx 15rpx 0 15rpx;
						position: absolute;
						right: -48rpx;
						top: -16rpx;

						&::after {
							position: absolute;
							content: '';
							clip-path: polygon(0rpx 0rpx, 0rpx 24rpx, 24rpx 0rpx);
							width: 24rpx;
							height: 24rpx;
							right: 0;
							bottom: -24rpx;
							/* 颜色变暗：filter滤镜、半透明遮罩 */
							/* 使用filter滤镜 使颜色变暗 */
							/*filter: brightness(.6);*/
							/* 给颜色上添加一个半透明遮罩实现颜色变暗 */
							background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3));
							background-color: inherit;
							/* 继承 */
						}
					}
				}

				.item-title {
					width: 100%;
					overflow: hidden;
					font-size: 36rpx;
					/* 多行文本溢出 隐藏超出部分省略号代替 */
					overflow: hidden;
					text-overflow: ellipsis;
					/* 因为要做多行文本溢出隐藏，要基于webkit内核的，常规的属性搞不定 */
					display: -webkit-box;
					/* 基于webkit盒模型设置对齐方式 - 纵向对齐 */
					-webkit-box-orient: vertical;
					/* 设置多行的行数 */
					-webkit-line-clamp: 2;
					color: #0052A3;
					margin-top: 28rpx;
				}

				// .item-detail {
				// 	width: 100%;
				// 	overflow: hidden;
				// 	font-size: 36rpx;
				// 	/* 多行文本溢出 隐藏超出部分省略号代替 */
				// 	overflow: hidden;
				// 	text-overflow: ellipsis;
				// 	/* 因为要做多行文本溢出隐藏，要基于webkit内核的，常规的属性搞不定 */
				// 	display: -webkit-box;
				// 	/* 基于webkit盒模型设置对齐方式 - 纵向对齐 */
				// 	-webkit-box-orient: vertical;
				// 	/* 设置多行的行数 */
				// 	-webkit-line-clamp: 2;
				// 	color: #0052A3;
				// 	margin-top: 28rpx;
				// }

				.type-detail {
					padding: 26rpx 14rpx;
					background: rgba(193, 213, 232, .3);
					margin-top: 16rpx;
					width: 90%;

				}

				.code-language {
					width: 100%;
					display: flex;
					height: 80rpx;
					align-items: center;
					margin-top: 20rpx;

					.code-item {
						width: auto;
						font-size: 30rpx;
						border: 1px solid #0052A3;
						padding: 0 10rpx;
						margin-left: 30rpx;
						border-radius: 10rpx;
						// border-radius: ;
					}
				}

			}
		}

	}
</style>